<template>
	<section>


		<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
			<template v-if="!item.leaf">
				<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
				<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
					<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
				</ul>
			</template>


			<template v-else>
				<li class="el-submenu">
					<div class="el-submenu__title el-menu-item"
						 style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;"
						 :class="$route.path==item.children[0].path?'is-active':''"
						 @click="$router.push(item.children[0].path)">
						<i :class="item.iconCls"></i>
					</div>
				</li>
			</template>


</li>


</template>

<script>
	export default {}
</script>
<style scoped>

</style>
